{% extends 'workflow/workflowengine/actions/WorkflowSetup.html' %}
{% load i18n common %}
{% block setup_form %}
    <div style="padding: 10px;height: 420px;width: 700px">
        <form class="layui-form action-form setup-form" action="" method="post" id="{{ model_name }}_{{ action_repr }}">
            {% csrf_token %}
            {% with form.form as f %}
                <div class="layui-form-item {% if not request.user.is_superuser or f.base_fields.company.queryset.count == 1 %} layui-hide {% endif %}">
                    {% layui_inline f.company %}
                </div>
                <div class="layui-form-item">
                    {% layui_inline f.workflow_code %}
                    {% layui_inline f.workflow_name %}
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline field-before">
                        <label class="layui-form-label"
                               for="id_type">{% trans 'workflowEngine_field_employee' %}</label>
                        <div class="layui-input-inline ">
                            <input name="type" id="id_type" lay-filter="id_type" value="" class="layui-input" readonly>
                            <div id="employee_origin">
                                <script>
                                    var employee_origin_name = '';
                                    var globalEmpSelected = [];
                                    {% if f.instance.id %}
                                        {% for item in f.instance.employee.all %}
                                            $('#employee_origin').append('<input type="hidden" name="employee" value="{{ item.id }}"/>');
                                            employee_origin_name = '{{ item.emp_code }}' + ',' + employee_origin_name;
                                            var emp_item = {
                                                id: {{ item.id }},
                                                emp_code: '{{ item.emp_code }}',
                                                {% if item.first_name %}
                                                    first_name: '{{ item.first_name }}',
                                                {% else %}
                                                    first_name: '',
                                                {% endif %}
                                                {% if item.last_name %}
                                                    last_name: '{{ item.last_name }}',
                                                {% else %}
                                                    last_name: '',
                                                {% endif %}
                                                {% if item.department.dept_name %}
                                                    dept_name: '{{ item.department.dept_name }}',
                                                {% else %}
                                                    dept_name: '',
                                                {% endif %}
                                            }
                                            globalEmpSelected.push(emp_item)
                                        {% endfor %}
                                    {% endif %}
                                    $('#id_type')[0].value = employee_origin_name;
                                </script>
                            </div>
                        </div>
                    </div>
                    {% layui_inline f.content_type %}
                </div>
                <div class="layui-form-item">
                    {% layui_inline f.start_date %}
                    {% layui_inline f.end_date %}
                </div>
                <div class="layui-tab">
                    <ul class="layui-tab-title">
                        <li class="layui-this"><span class="required">*</span>{% trans 'workflow.tabs.workflowSetup' %}
                        </li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div id="workflowNodeContainer" class="layui-tab layui-tab-brief" lay-filter="workflow-node"
                                 style="width: 680px">
                                <a id="addWorkflowNode" href="javascript:void(0);" class="layui-btn"
                                   style="float: right;width: 80px;">Add</a>
                                <ul id="tab-title-id" class="layui-tab-title" style="margin-right: 80px;"></ul>
                                <div id="tab-content-id" class="layui-tab-content"
                                     style="height: 120px; padding-top: 20px"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-hide">
                    {{ f.node }}
                </div>
            {% endwith %}
            <script>
                layui.use(['table', 'form', 'element', 'layer', 'tablePlug'], function () {
                    var table = layui.table, layer = layui.layer, form = layui.form;
                    $('#id_type').click(function () {
                        var company = $('input[name=company]').val();
                        if (company == 'undefined' || company == undefined) {
                            layer.open({
                                time: 1000,
                                content: "{% trans 'company_field_is_required' %}",
                                btn: ['ok'],
                                title: 'Message',
                                icon: 5
                            });
                            returnFalse()
                        }
                        $.ajax({
                            url: "/personnel/filter_resign_employee/?company=" + company,
                            type: "GET",
                            dataType: "html",
                            success: function (pannel) {
                                layer.open({
                                    type: 1,
                                    title: "{% trans 'workflowEngine_field_employee' %}",
                                    zIndex: 1003,
                                    area: ['1080px', '550px'],
                                    content: pannel,
                                    btn: [gettext("btn_confirm"), gettext("btn_cancel")],
                                    success: function (layero, index) {
                                        // 将globalEmpSelected初始化到selected table
                                        for (i = 0; i < globalEmpSelected.length; i++) {
                                            globalEmpSelected[i]['LAY_CHECKED'] = true;
                                        }
                                        var selected_table = table.reload('id-employee-frame-selected', {
                                            data: globalEmpSelected,
                                            limit: globalEmpSelected.length
                                        });
                                        // 将globalEmpSelected初始化到unselect table
                                        var unselect = table.reload('id-employee-frame-unselect', {limit: globalEmpSelected.length});
                                    },
                                    yes: function (index, layero) {
                                        var name_val = $('#employeeFrameSelectedDetailContainer').val()
                                        $('#id_type')[0].value = name_val;
                                        $('#employee_origin').html('')
                                        globalEmpSelected = layui.table.checkStatus('id-employee-frame-selected').data;
                                        for (i = 0; i < globalEmpSelected.length; i++) {
                                            $('#employee_origin').append('<input type="hidden" name="employee" value="' + globalEmpSelected[i].id + '"/>');
                                        }
                                        if (globalEmpSelected.length) {
                                            $('#{{ model_name }}_edit_form input[id^="applicant_position"]').attr("disabled", "disabled")
                                            $('#{{ model_name }}_edit_form input[id^="applicant_position"]').attr("value", "")
                                            $('#{{ model_name }}_edit_form input[name^="applicant_position"]').attr("value", "");
                                            $('#{{ model_name }}_edit_form input[id^="departments"]').attr("disabled", "disabled")
                                            $('#{{ model_name }}_edit_form input[id^="departments"]').attr("value", "")
                                            $('#{{ model_name }}_edit_form input[name^="departments"]').attr("value", "");
                                        } else {
                                            $('#{{ model_name }}_edit_form input[id^="applicant_position"]').removeAttr("disabled")
                                            $('#{{ model_name }}_edit_form input[id^="departments"]').removeAttr("disabled")
                                        }
                                        layer.close(index)
                                    }
                                });
                            },
                            error: function (response) {
                                console.log(response.responseText);
                            }
                        });

                    });
                    $('select[name=company]').attr("lay-filter", "company");
                     console.log(123)
                    form.render('select');
                    form.on('select(company)', function (data) {
                        console.log(123)
                        globalEmpSelected = [];
                        var selected_table = table.reload('id-employee-frame-selected', {
                            data: globalEmpSelected,
                        });
                        var unselect = table.reload('id-employee-frame-unselect');
                        $('#id_type')[0].value = [];
                        $('#employee_origin').clear()
                    });
                })
                ;
            </script>
        </form>
    </div>
{% endblock %}